<template>
  <div class="freckle-map-body">
    <div class="top-buttons">
      <div class="tag" :class="{'map-left': mapLeft !== undefined && mapLeft !== false}">
        <span :class="{'on': !isVideo}" @click="isVideo = false">快速标绘</span>
        <span :class="{'on': isVideo}" @click="isVideo = true">实时标绘</span>
      </div>
      <div class="right-tag">
        <i v-if="mapBtns.includes(1)" class="iconfont icon-weizhi1" :class="{'on': anchorPointShow}" @click="clickAnchorPoint()"></i>
        <i v-if="mapBtns.includes(2)" class="iconfont icon-liulanqi" :class="{'on': freckleShow}" @click="clickFreckleButton()"></i>
      </div>
    </div>
    <div class="freckle-map-area" :class="{'map-show': freckleShow || anchorPointShow,
      'map-left': mapLeft !== undefined && mapLeft !== false,
      'top-show': topPresetShow}">
      <div class="video-image-area" :class="{'shrink': topPresetShow}">
        <el-button  v-if="mapBtns.includes(3)" icon="iconfont icon-zhuatu iconSnapshot" class="snapshot" :class="!drawData.presetId ? 'disable' : ''"
                    :disabled="!drawData.presetId" size="small" @click="snapshot">&nbsp;抓 图</el-button>
        <DrawBox ref="drawBox" :data="drawData" :isVideo="isVideo"
          :isLayer="freckleShow" :isLocation="anchorPointShow"
          v-loading="isLoading" :element-loading-text="loadText"
          :mapBtns="mapBtns" v-bind="$attrs" v-on="$listeners" />
      </div>
      <div class="map-area" >
        <mapDialogPlotting ref="map" v-show="isMapList.isMap" :ifLayer="freckleShow" :ifLngLatAdd="anchorPointShow"
          :isMapList="isMapList" :ifToolBar="true" v-bind="$attrs" @tableHighlight="tableHighlight"/>
      </div>
    </div>
  </div>
</template>
<script>
import DrawBox from "@/components/canvas/drawBox";
import mapDialogPlotting from "@/components/mapDialog/mapDialogPlotting.vue";
import MapDialog from "@/components/openlayer/mapDialog.vue";
import {doSnapShot} from '@/api/video/video'

export default {
  components: {MapDialog, DrawBox, mapDialogPlotting},
  props: {
    drawData: {}, //数据参数
    topPresetShow: {}, //是否显示顶部预置位
    mapBtns: { //按钮权限, 1: 定位按钮, 2: 图斑按钮, 3: 抓图按钮
      default: () => ([1, 2])
    },
    mapLeft: {}, //地图显示位置, 默认在右侧, 可选 true: 左侧
    mapDefault: { //地图默认显示内容,可多选 1: 定位, 2: 图斑
      default: () => ([])
    },
  },
  data() {
    return {
      freckleShow: false,//显示图斑按钮选中
      anchorPointShow: false,//定位点按钮选中
      isLoading: false,
      loadText: "",
      isMapList: {
        isMap: false, //地图
        lng: "",
        lat: "",
      },
      isVideo: false, //是否实时视频
      customerCode : '',
      timer: null,
    };
  },
  computed: {
    getMapOpenStatus(){
      return this.isMapList.isMap;
    }
  },
  watch: {
    isVideo(newVal){
      this.$emit('changeTab', newVal);
    },
    mapDefault(newVal){
      if(newVal.includes(1)) {
        this.anchorPointShow = true;
      }
      if(newVal.includes(2)) {
        this.freckleShow = true;
      }
      this.checkMapOpen();
    }
  },
  created() {
    this.customerCode = this.$store.getters.userInfo.tenantId;
  },
  mounted() {
    if(this.mapDefault.includes(1)) {
      this.clickAnchorPoint();
    }
    if(this.mapDefault.includes(2)) {
      this.clickFreckleButton();
    }
  },
  methods: {
    /**
     * 加载动画
     * @param loadText
     */
    startLoading(loadText){
      this.isLoading = true;
      this.loadText = loadText;
    },
    /**
     * 结束加载动画
     */
    endLoading(){
      this.isLoading = false;
      this.loadText = "";
    },
    /**
     * 标绘传数据到地图
     */
    doDrawToMap({type, status, info, draws} = {}) {
      console.log(type, status, info, draws);
      if(type === 1) {
        this.clickAnchorPoint(status);
      }
      if(type === 2) {
        this.clickFreckleButton(status);
      }
      this.$refs.map.doDrawToMap({type, status, info, draws});
    },
    /**
     * 标绘回填
     */
    doDrawBack(draw, append, select) {
      this.$refs.drawBox.doDrawBack(draw, append, select);
    },
    /**
     * 标绘还原颜色
     */
    restoreColor(){
      this.$refs.drawBox.restoreColor();
    },
    /**
     * 地图传数据到标绘
     */
    doMapToDraw({info} = {}) {
      this.$refs.drawBox.doMapToDraw({info});
    },
    /**
     * 清除标绘
     */
    clearDraw() {
      this.$refs.drawBox.clearDraw();
    },
    /**
     * 获取全部标绘
     */
    getAllDraw(type) {
      return this.$refs.drawBox.getAllDraw(type);
    },
    /**
     * 主动暂存
     */
    doSave(fn) {
      this.$refs.drawBox.doSave(fn);
    },
    /**
     * 选择标绘区域
     */
    doDrawChoose(id, select, call) {
      this.$refs.drawBox.doDrawChoose(id, select, call);
    },
    /**
     * 点击图斑按钮
     */
    clickFreckleButton(b = !this.freckleShow){
      this.freckleShow = b;
      this.$emit('clickFreckleButton', b);
      this.checkMapOpen();
    },
    /**
     * 点击定位点按钮
     */
    clickAnchorPoint(b = !this.anchorPointShow){
      this.anchorPointShow = b;
      this.$emit('clickAnchorPoint', b);
      this.checkMapOpen();
    },
    /**
     * 判断地图是否是打开状态
     */
    checkMapOpen(){
      this.isMapList.isMap = this.anchorPointShow || this.freckleShow;
    },
    /**
     * 抓图
     */
    snapshot() {
      console.log('%c snapshot方法------this.drawData: ','color: #FAC800',this.drawData);
      if( !this.drawData.presetId ||  this.drawData.presetId === '暂无预置点'){
        return false;
      }
      console.log('%c snapshot方法------this.drawData: ','color: #FAC800',this.drawData);
      let params = {
        deviceCode: this.drawData.deviceCode, //设备编码
        channelCode: this.drawData.channelCode, //通道编码
        presetId: this.drawData.presetId, //预置位 id
        presetName: this.drawData.presetName,
        customerCode: this.customerCode, //租户id
        tenantId: this.customerCode, //租户id
      };
      doSnapShot(params).then((res) => {
        if(res.code === 200) {
          $message.s("抓图成功");
          if (this.timer) {
            // 取消上一次的定时器
            clearTimeout(this.timer);
          }
          this.timer = setTimeout(() => {
            this.getImg();
          }, 5000);
        }else {
          $message.e(res.msg);
        }
      })
    },
    /**
     * 查询图片
     */
    getImg(img) {
      this.$refs.drawBox.getImg(img);
    },
		tableHighlight(row){
			this.$emit('tableHighlight', row)
		},
  },
}
</script>

<style lang="scss" scoped>

.freckle-map-body{
  position: relative;
  width: 100%;
  height: 100%;
}
.top-buttons{
  height: 45px;
  .tag{
    display: flex;
    height: 32px;
    line-height: 30px;
    border: 1px solid var(--theme);
    border-radius: 3px;
    position: absolute;
    left: 0;
    top: 0;
    span{
      display: block;
      width: 100px;
      text-align: center;
      color: var(--theme);
      font-size: 14px;
      cursor: pointer;
      &.on{
        color: #fff;
        background: var(--theme);
        cursor: default;
      }
    }
  }
  .tag.map-left{
    left: calc(50% + 6px);
  }
  .right-tag{
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    i{
      display: block;
      width: 32px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: #fff;
      box-shadow: 0 2px 8px 2px rgba(72, 72, 72, 0.1);
      border-radius: 6px;
      color: #606266;
      font-size: 18px;
      cursor: pointer;
      margin: 0 0 0 16px;

      &.on{
        background: var(--theme);
        color: #fff;
      }
    }
  }
}


.freckle-map-area{
  width: 100%;
  position: relative;

  .video-image-area, .map-area{
    aspect-ratio: 16/9;
    max-height: 100%;
    position: relative;
  }

  .video-image-area{
    width: 100%;
    height: 100%;

  }
  .map-area{
    position: relative;
    width: 0;
  }
  &.map-show{
    .video-image-area, .map-area{
      width: calc(50% - 6px);
      aspect-ratio: 16/9;
      height: 100%;
    }
  }
  &.map-left{
    flex-direction: row-reverse!important;
  }
}

.snapshot{
  width: 82px;
  height: 32px;
  text-align: center;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: -45px;
  /deep/ .iconSnapshot{
    font-size: 13px !important;
  }
}
.disable{
  cursor: no-drop;
}

.top-show:not(.map-show){
  height: calc(100% - 221px);
}

.freckle-map-area.top-show:not(.map-show){
  height: calc(100% - 221px);
}
.freckle-map-area:not(.map-show){
  height: calc(100% - 45px);
}


.freckle-map-area:not(.map-show) .video-image-area{
  margin: 0 auto;
}
.freckle-map-area.map-show{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
</style>
